<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>汽车管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/homepage.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
    .searchbar{
        text-align: center;
    }
    .table-item{
        text-align: center;
    }
</style>
<body>
<div th:include="headbar::admin_headbar" style="margin-bottom:70px"></div>
<!--<div style="padding: 20px 550px 10px">-->

<div class="panel panel-default" style="width: 90%;margin-left: 5%">
    <div class="panel-heading" style="display: flex; justify-content: space-between; align-items: center;">
        <h3 class="panel-title" style="text-align: center; flex-grow: 1;">汽车列表</h3>
        <div>
            <button class="btn btn-primary btn-small" data-toggle="modal" data-target="#add">添加
            </button>
        </div>
    </div>
    <div class="panel-body">
        <table class="table table-hover" style="text-align:center">
            <thead>
            <tr>
                <th class="table-item">汽车品牌</th>
                <th class="table-item">车型</th>
                <th class="table-item">车牌号</th>
                <th class="table-item">颜色</th>
                <th class="table-item">价格/天</th>
                <th class="table-item">状态</th>
                <th class="table-item">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr  th:each="car: ${list}" >
                <td th:text="${car.carBrand}" class="table-item"></td>
                <td th:text="${car.carModel}" class="table-item"></td>
                <td th:text="${car.licensePlate}" class="table-item"></td>
                <td th:text="${car.color}" class="table-item"></td>
                <td th:text="${car.price}" class="table-item" ></td>
                <td class="table-item" >
                    <!--                    //已借出：0，可借：1，维护中：2，-->
                    <button th:classappend="${car.status == 1 ? 'btn-info' : 'btn-danger'}"
                            th:text="${car.status == 1 ? '可租借' :(car.status == 2?'维护中' :'未归还')}"
                            th:disabled="true">
                    </button>
                </td>
                <td class="table-item" >
                    <button class="btn-info" data-toggle="modal" data-target="#update"
                            th:attr="carStatus=${car.status},carId=${car.carId}"
                            th:text="修改"
                            onclick="fillUpdateModalData(this)">
                    </button>
                </td>
                <td class="table-item">
                    <button class="btn-danger" th:attr="carStatus=${car.status},carId=${car.carId}"
                            onclick="deleteRecord(this)">x</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>


<!--update修改弹窗-->
<div id="update" class="modal fade" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-title">
                <h1 class="text-center">修改界面</h1>
            </div>
            <div class="modal-body">
                <form id="form-update" > <!--$.ajax-->
                    <div class="form-group has-feedback">
                        <label for="ad-carBrand">品牌</label>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-tag"></span>
                            </span>
                            <input id="ad-carBrand" class="form-control" required>
                        </div>
                    </div>

                    <div class="form-group has-feedback">
                        <label for="ad-carModel">型号</label>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-tag"></span>
                            </span>
                            <input id="ad-carModel" class="form-control" required>
                        </div>
                    </div>

                    <div class="form-group has-feedback">
                        <label for="ad-licensePlate">车牌号</label>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-tag"></span>
                            </span>
                            <input id="ad-licensePlate" class="form-control" required>
                        </div>
                    </div>

                    <div class="form-group has-feedback">
                        <label for="ad-color">颜色</label>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-tag"></span>
                            </span>
                            <input id="ad-color" class="form-control" required>
                        </div>
                    </div>


                    <div class="form-group has-feedback">
                        <label for="ad-price">价格/天</label>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-tag"></span>
                            </span>
                            <input id="ad-price" class="form-control" required>
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label for="ad-status">状态</label>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-tag"></span>
                            </span>
                            <select id="ad-status" class="form-control">
                                <option value="1" >可租借</option>
                                <option value="2" >维护中</option>
                                <option value="0" >未归还</option>
                            </select>
                        </div>
                    </div>

                    <div class="text-right">
                        <button type="submit" class="btn btn-primary"  id="btn-up" >提交修改</button>
                        <button class="btn btn-danger" data-dismiss="modal">取消</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>
<!--添加弹窗-->
<div id="add" class="modal fade" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-title">
                <h1 class="text-center">添加界面</h1>
            </div>
            <div class="modal-body">
                <form id="form-add" > <!--$.ajax-->
                    <div class="form-group has-feedback">
                        <label for="ad-carBrand1">品牌</label>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-tag"></span>
                            </span>
                            <input id="ad-carBrand1" class="form-control" required>
                        </div>
                    </div>

                    <div class="form-group has-feedback">
                        <label for="ad-carModel1">型号</label>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-tag"></span>
                            </span>
                            <input id="ad-carModel1" class="form-control" required>
                        </div>
                    </div>

                    <div class="form-group has-feedback">
                        <label for="ad-licensePlate1">车牌号</label>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-tag"></span>
                            </span>
                            <input id="ad-licensePlate1" class="form-control" required>
                        </div>
                    </div>

                    <div class="form-group has-feedback">
                        <label for="ad-color1">颜色</label>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-tag"></span>
                            </span>
                            <input id="ad-color1" class="form-control" required>
                        </div>
                    </div>



                    <div class="form-group has-feedback">
                        <label for="ad-price1">价格/天</label>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-tag"></span>
                            </span>
                            <input id="ad-price1" class="form-control" required>
                        </div>
                    </div>

                    <div class="form-group has-feedback">
                        <label for="ad-status1">状态</label>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-tag"></span>
                            </span>
                            <select id="ad-status1" class="form-control">
                                <option value="1" >可租借</option>
                                <option value="2" >维护中</option>
                                <option value="0" >未归还</option>
                            </select>
                        </div>
                    </div>



                    <div class="text-right">
                        <button type="submit" class="btn btn-primary"  id="btn-up1" >提交添加</button>
                        <button class="btn btn-danger" data-dismiss="modal">取消</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>
<script>

    var carId;
    // var carStatus;
    //修改界面自动填充
    function fillUpdateModalData(button ) {


        // 获取选中的行
        var selectedRow = $(button).closest('tr');

        carId = button.getAttribute("carId");
        var carStatus = button.getAttribute("carStatus");
        // 获取选中行中每个单元格的数据
        var carBrand = selectedRow.find('td:eq(0)').text();
        var carModel = selectedRow.find('td:eq(1)').text();
        var licensePlate = selectedRow.find('td:eq(2)').text();
        var color = selectedRow.find('td:eq(3)').text();
        var price = selectedRow.find('td:eq(4)').text();

        // 将数据填充到弹窗中的表单中
        $('#ad-carBrand').val(carBrand);
        $('#ad-carModel').val(carModel);
        $('#ad-licensePlate').val(licensePlate);
        $('#ad-color').val(color);
        $('#ad-price').val(price);
        $('#ad-status').val(''+carStatus);
        // $('#ad-status').val(carStatus);
        //显示弹窗
        // $('#update').modal('show');
    }



    function checkForm() {
        // var carBrand = $('#ad-carBrand').val();
        // var carModel = $('#ad-carModel').val();
        // var licensePlate = $('#ad-licensePlate').val();
        // var color = $('#ad-color').val();
        var price = $('#ad-price').val();

        // 必须为数字
        if (isNaN(price)) {
            alert("请正确输入价格！");
            return false;
        }

        // 禁止输入某些字符
        // var regExp = /[&<>'"-]/;
        // if (regExp.test(carBrand) || regExp.test(carModel)) {
        //     alert("姓名和密码不能包含以下字符：& < > ' \" -");
        //     return false;
        // }

        return true;
    }



    //修改提交请求
    $(document).ready(function() {

        const form = $('#form-update');

        form.on('submit', function(e) {
            e.preventDefault();

            if(!checkForm()) return false;

            var carBrand = $('#ad-carBrand').val();
            var carModel = $('#ad-carModel').val();
            var licensePlate = $('#ad-licensePlate').val();
            var color = $('#ad-color').val();
            var price = $('#ad-price').val();
            var status = $('#ad-status').val();


            $.ajax({
                url: '/cars/updateCar',
                method: 'POST',
                data: {carId:carId, carBrand:carBrand,carModel:carModel,licensePlate:licensePlate,
                    color:color,price:price,status:status},
                success: function(response) {
                    alert('成功修改！');
                    window.location.href = response; // 重定向到指定页面 admin_cars;
                },
                error: function(xhr, status, error) {
                    alert("修改失败！");
                    // window.location.href = "/cars/admin_cars" // 重定向到指定页面 admin_cars;

                }
            });
        });
    });
//---------------------------

    //添加提交请求

    $(document).ready(function() {

        const form = $('#form-add');

        form.on('submit', function(e) {
            e.preventDefault();

            // if(!checkForm1()) return false;

            var carBrand = $('#ad-carBrand1').val();
            var carModel = $('#ad-carModel1').val();
            var licensePlate = $('#ad-licensePlate1').val();
            var color = $('#ad-color1').val();
            var price1 = $('#ad-price1').val();
            var status1 = $('#ad-status1').val();


            if (isNaN(price1)) {
                alert("请正确输入价格！");
                return false;
            }

            $.ajax({
                url: '/cars/addCar',
                method: 'POST',
                data: {carBrand:carBrand,carModel:carModel,licensePlate:licensePlate,
                    color:color,price:price1,status:status1},
                success: function(response) {
                    alert('成功添加！');

                    window.location.href = response; // 重定向到指定页面 admin_cars;
                },
                error: function(xhr, status, error) {
                    alert("添加失败！");
                    // window.location.href = "/cars/admin_cars" // 重定向到指定页面 admin_cars;

                }
            });
        });
    });
//-------------------------------
    //del
    function deleteRecord(button) {
        var id =carId = button.getAttribute("carId");
        $(document).ready(function() {
            var carStatus = button.getAttribute("carStatus");
            //未归还
            if (carStatus === '0') {
                alert("无法进行该操作");
                return false;
            }

            $.ajax({
                url: '/cars/delCar',
                method: 'POST',
                data: {carId:id},
                success: function(response) {
                    alert('成功删除！');
                    window.location.href = response; // 重定向到指定页面 admin_cars;
                },
                error: function(xhr, status, error) {
                    alert("删除失败！");
                    // window.location.href = "/cars/admin_cars" // 重定向到指定页面 admin_cars;

                }
            });
        });
    }
</script>
</body>
</html>